<template>
	<el-card>
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="系统说明" name="description">
				<h3>代码小子</h3>
				<h4>代码小子帮助用户快速创建前后端分离项目</h4>
			</el-tab-pane>
			<el-tab-pane label="属性设置" name="variable">
				<div v-html="dataForm.variableMarkdown"></div>
			</el-tab-pane>
			<el-tab-pane label="系统帮助" name="helper">
				<div v-html="dataForm.helperMarkdown"></div>
			</el-tab-pane>
		</el-tabs>
	</el-card>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { TabsPaneContext } from 'element-plus/es'
import MarkdownIt from 'markdown-it'
import { useManualApi } from '@/api/manual'

const activeName = ref('description')

const dataForm = reactive({
	variable: '',
	variableMarkdown: '',
	helper: '',
	helperMarkdown: ''
})

const handleClick = (tab: TabsPaneContext) => {
	if (tab.paneName !== 'variable') {
	}
}

const mdi = new MarkdownIt({
	html: false,
	linkify: true
})

const init = () => {
	useManualApi().then(res => {
		// console.log(res.data)
		dataForm.variable = res.data.variableDefinition
		dataForm.helper = res.data.helper
		dataForm.variableMarkdown = mdi.render(dataForm.variable)
		dataForm.helperMarkdown = mdi.render(dataForm.helper)
	})
}

init()
</script>
